﻿/*----------------------------------------------------------
The base color for this template is #332211. If you'd like
to use a different color start by replacing all instances of
#332211 with your new color.
----------------------------------------------------------*/
body
{
    background-color: #FFFFFF;
    font-size: .75em;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

div.underconst
{
    width: 1005px;
   /* display: block;
    /*background-image: url('/Content/Simply-und.gif');*/
    /*width: 549px;
    height: 132px;*/
    margin: 0 auto;
}

img#mainLogo
{
    
    margin:280px auto 0 228px;
}

a:link
{
    color: #034af3;
    text-decoration: underline;
}
a:visited
{
    color: #505abc;
}
a:hover
{
    color: #1d60ff;
    text-decoration: none;
}
a:active
{
    color: #12eb87;
}

p, ul
{
    margin-bottom: 20px;
    line-height: 1.6em;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    font-weight:normal;
}

h1
{
    font-size: 2.8em;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -0.08em;
}
h2
{
    padding: 0 0 10px 0;
    font-size: 2em;
}
h3
{
    font-size: 1.7em;
    margin:0;
}
h4
{
    font-size: 1.4em;
    padding: 0;
    margin: 0;
}
h5, h6
{
    font-size: 1em;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page
{
    margin:0 auto;
    width: 1004px;
}

#header
{
    position: relative;
    margin: 0px;
    color: #000;
    background-color:#FFFFFF;
    height:85px;
    
}

#nav-menu
{
    height:60px;
    margin-top:5px;
}

#header h1
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #000;
    border: none;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px !important;
}

#main
{   
    background-color: #fff;
    width: 100%;
    margin:0 auto;
    clear:both;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
}

#footer
{
    color: #999;
    font-size: 1em;
    line-height:0.9em;
    border-top: solid 1px #B6B6B6;
    margin-top:15px;
    clear:both;
}



div#footer div
{
    margin:3px 0;
    padding:0 8px;
}


div#footer a:link
{
    color: #999999;
    text-decoration: none;
}

div#footer a:visited
{
    color: #999999;
    text-decoration: none;
}

div#footer a:hover
{
    color: #FEB88D;
    text-decoration: underline;
}


/* TAB MENU AND TITLE
----------------------------------------------------------*/



img#title-logo
{

    border:0;
}


div#greeting
{
    float:left;
    color: #FEB88D;
}

a.product-button
{
    display:block;
    float:left;
    margin-left: 260px;
    width:145px;
    height:58px;
    background: url('/Content/prod-butt.png') no-repeat;
    background-position:0px -58px;
    text-indent: -9999px;
}

a.product-button:hover
{
    background-position:0px 0px;
}

a.cart-button
{
    display:block;
    float:left;
    margin-left: 40px;
    width:145px;
    height:58px;
    background: url('/Content/cart-butt.png') no-repeat;
    background-position:0px -58px;
    text-indent: -9999px;
}

a.cart-button:hover
{
    background-position:0px 0px;
}


/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset 
{
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #CCC;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset label 
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

input[type="password"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

/* TABLE
----------------------------------------------------------*/

table 
{
  border: solid 1px #e8eef4;
  border-collapse: collapse;
}

table td 
{
  padding: 5px;   
  border: solid 1px #e8eef4;
}

table th
{
  padding: 6px 5px;
  text-align: left;
  background-color: #e8eef4; 
  border: solid 1px #e8eef4;   
}

/* MISC  
----------------------------------------------------------*/
.clear
{
    clear: both;
}

.error
{
    color:Red;
}

.float-right
{
    float:right;
}

.float-left
{
    float:left;
}

.field-validation-error
{
    color: #CC9999;
    display: block;
    font-size:0.75em;
    text-align:right;
}

.field-validation-valid
{
    display: block;
    visibility:hidden;
    height:12px;
}

input[type="text"].input-validation-error,
input[type="password"].input-validation-error,
.input-validation-error
{
    border: 1px solid #DD3333;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

.display-label,
.editor-label
{
    /*font-weight: bold;
    font-style:italic;*/
}
/*
.display-label,
.editor-label
{
    margin: 0.8em 0 0.1em 0;
}
*/
/*
.display-field,
.editor-field
{
    margin: 0.1em 0 0.1em 0;
}*/
.text-box
{
    width: 30em;
}

.text-box.multi-line
{
    height: 6.5em;
}

.tri-state
{
    width: 6em;
}

/*-------------------- headline -------------*/
div#lang-chooser ul
{
    margin:0px;
    padding:0px;
    list-style-type:none;
    display:none;
}

div#lang-chooser:hover ul
{
    display:block;
    position:absolute;
}

div#headline
{
    height: 20px;
    background-color:#F1F3F8;
    line-height:0.9em;
    padding:0 4px;
    font-size:1em;
}

div#headline div:first-child
{
    color:#FEB88D;
    text-decoration: none;
    border:0;
}

div#headline div
{
    margin:4px 0;
    padding:0 8px;
}

div#lang-chooser,
div#login-control
{
    border-right: solid 1px #CCC;
    float:right;
}


div#headline a:link
{
    color: #666666;
    text-decoration: none;
}

div#headline a:visited
{
    color: #666666;
    text-decoration: none;
}

div#headline a:hover
{
    color: #FEB88D;
    text-decoration: underline;
}


/* Index page
-------------------------- */
div.box
{
    float:left;
    padding:0 10px;
}

div.box div
{
    float:left;
}

div.box > p:first-child
{
    font-size: 1.8em;
    line-height: 1.1em;
    margin:0;
    border-bottom:solid 1px #CCC;
}

h2.pageSubhead
{
    padding:0;
    margin:0px;
    font-size:1.6em;
}

/*
---------------------- Images/thumbnails and links ------------------*/

img.cardThumb
{
    border: 1px solid #CCCCCC;
    width:190px;
    height:106px;
}

img.card-design
{
    border: 1px solid #CCCCCC;
    /*width:650px;
    height:361px;*/
    width:340px;
    height:188px;
}

p.thumbDescription
{
    font-size: 1.2em;
    background-color: #B5C3D2;
    margin:0px;
    line-height: 1.8em;
    padding:0 6px;
}

a.image-link
{
    opacity:0.7;
    filter:alpha(opacity=70);
}

a.image-link:hover
{
    opacity:1;
    filter:alpha(opacity=100);
}



/*----------------- Navigation panels --------- */


/*------- Product page --------*/

div#product-list
{
    width:1004px;
    height:700px;    
}

div#product-list > div
{
    float:left;
}


div#product-top-panel
{
    height:90px;
    width:1004px;
    border-bottom:solid 1px #ccc;
}

div#product-top-panel > div
{
    float:left;
}

div#product-type-panel
{
    padding:0px 10px 10px 10px;
}

div#category-panel,
div#product-type-panel
{
    width:163px;
    border-right:solid 1px #CCC;
}

div#product-type-panel
{
    height:80px;
}

div#product-list-panel,
div#category-panel
{
    height:590px;
}

div#product-list-panel
{
    width:800px;
}

div#color-tags-panel
{
    width:820px;
}

div#color-tags-panel > div
{
    padding:0px 10px 10px 10px;
    width:390px;
    float:left;
    height:80px;
}

div#color-tags-panel > div:first-child
{
    width:389px;
    border-right:solid 1px #CCC;
}

div#product-main-panel
{
    width:1004px;
    height:610px;
}

div#product-main-panel > div
{
    float:left;
    padding:10px;
}


div#paging-header
{
    margin-bottom:10px;
}

div.paging-list
{
    width:800px;
    height:20px;
}

a.paging-page-link,
span.paging-page-link
{
    display:inline-block;
    width:18px;
    height:18px;
    border:solid 1px #CCC;
    text-align:center;
    text-decoration:none;
    color:inherit;
    line-height:18px;
    margin:0px 3px;
}

span.paging-page-link
{
    background-color:#EEE;
}

a.paging-page-link:hover
{
    background-color:#CCC;
    color:#000;
}

div.pages-container
{
    display:table;
    margin:0px auto;
    
}

div.pages-box
{
    width:700px;
    height:20px;
    float:left;
}

a.paging-previous,
a.paging-next
{
    display:block;
    width:50px;
    height:20px;
    text-indent:-9999px;
    float:left;
}

a.paging-previous
{
    background:url('/Content/paging-prev.gif') no-repeat;
    float:left;
}

a.paging-next
{
    background:url('/Content/paging-next.gif') no-repeat;
    float:right;
}

a.paging-next:hover,
a.paging-previous:hover,
a.no-paging
{
    background-position:0px -20px;
}

ul.navlist
{
    margin:0;
    padding:0px 0px 20px 0px;
}

ul.navlist li
{
    list-style: none;
    line-height:1.1em;
}

ul.navlist li a
{   font-size:0.8em;
    text-decoration: none;
    letter-spacing:0.07em;
    color: #696969;
}

ul.navlist li a.selected-filter
{   font-size:0.8em;
    text-decoration: none;
    letter-spacing:0.07em;
    color: #FEB88D;
    font-weight:bold;
    
}

ul.navlist li a:hover
{   
    text-decoration:underline;
    color: #333;
    
}

div#product-list-box
{
    width:800px;
    height:532px;
}

div#product-list-box > div
{
    float:left;
}

div.bCardItem
{
    width:192px;
    height:108px;
    margin:0px 8px 8px 0px;
}

/*------------------------- Index page -----------------*/

h2.product-name
{
    font-size: 1.6em;
    border-bottom:solid 5px #FEB88D;
    white-space:nowrap;
    padding:0;
    display:table;
    margin:0 auto;
}

div#adZone
{
    overflow:hidden;
    margin-bottom: 40px;
    margin-top:20px;
}


div.text-desc
{
    width:240px;
    height:600px;
    float:left;
    padding-left: 10px;
}

div.text-desc h3
{
    font-size:2em;
    color:#333333;
}

div.text-desc ul
{
    list-style-type:none;
    padding:0;
    margin:0;
    font-size:1.2em;
}

div.invisible
{
    display:none;
}

div#description
{
    padding-top: 10px;
    position:relative;
    width:750px;
    height: 600px;
    float:right;
}

div#description div
{
    width:180px;
    height:180px;
    position:absolute;
    cursor:pointer;
}

div#description h2
{
    color:#FFFFFF;
    padding:6px 0px 0px 8px;
    font-size:2em;
    line-height:1em;
    margin:0;
    
}
.green-box
{
   background-image: url('/Content/rect/green.gif');
   top:0px;
   left:50px;
}

.pink-box
{
   background-image: url('/Content/rect/pink.gif');
   top:100px;
   left:320px;
}

.blue-box
{
   background-image: url('/Content/rect/blue.gif');
   top:0px;
   left:525px;
}

.yellow-box
{
   background-image: url('/Content/rect/yellow.gif');
   top:350px;
   left:240px;
}

.orange-box
{
   background-image: url('/Content/rect/orange.gif');
   top:200px;
   left:5px;
}

.violet-box
{
   background-image: url('/Content/rect/violet.gif');
   top:370px;
   left:500px;
}


a.button
{
    padding: 3px 10px;
    color: #666666;
    border:solid 1px #FEB88D;
    font-size: 1.5em;
    letter-spacing:-0.052em;
    line-height:0.9em;
    text-decoration:none;
    background-color:#F9F9F9;
}

a.button:hover
{
    
    color: #FD8237;
    border:solid 1px #FD8237;
    
}

.price
{
    font-size: 1.5em;
    color: #009900;
}


a.color-item
{
    display:block;
    float:left;
    height:12px;
    width: 12px;
    text-indent: -9999px;
    /*font-size: 0em;*/
    margin: 5px 10px 5px 0px;
}

a.selected-col-filter
{
    height:8px;
    width: 8px;
    border:solid 2px #CCC;
}


/*--------------Layout style------------------*/

ul#layout-list{
    margin:10px auto;
    padding:0px;
    width:420px;
}

ul#layout-list li
{
    float:left;
    list-style: none;
    padding-right: 5px;
}

ul#layout-list img
{
    border:0;
}

ul#layout-list a:hover img
{
    background-color:#EEEE66;
} 

/*-------------WIZARD CSS---------------------------------*/



div#product-wizard
{
    height:21px;
    margin-bottom:20px;
}
div#product-wizard a
{
    float:left;
    line-height:1.1em;
    font-size:1.5em;
    text-decoration:none;
    display:block;
    height:21px;
    padding-left:24px;
}

a.wizard-item-Inactive
{
    background-position:0px 0px;
    background-repeat:no-repeat;
    color:#DBDBDB;
}

a.wizard-item-Inactive:hover
{
    background-position:0px -21px;
    color:#DBDBDB;
}

a.wizard-item-Active
{
     background-position:0px -21px;
    background-repeat:no-repeat;
    color:#333333;
}

a.wizard-item-Passed
{
    background-position:0px -42px;
    background-repeat:no-repeat;
    color:#333333;
}

#wizard-one
{
    background-image:url('/Content/wizard_one.gif');
}


#wizard-two
{
    background-image:url('/Content/wizard_two.gif');
}

#wizard-three
{
    background-image:url('/Content/wizard_three.gif');
}



div.wizard-arrow-Active,
div.wizard-arrow-Passed
{
    float:left;
    height:21px;
    width:34px;
    margin:0px 10px;
    background-image:url('/Content/wizard_arrow.gif');
    background-position:0px 0px;
}

div.wizard-arrow-Inactive
{
    float:left;
    height:21px;
    width:34px;
    margin:0px 10px;
    background-image:url('/Content/wizard_arrow.gif');
    background-position:0px -21px;
}


/*--------- Customization page ----------*/


div#middle-cont
{
    width:500px;
    float:left;
}

div#right-cont
{
    width:200px;
    float:left;
}

div#contactInfo
{
    width:300px;
    float:left;
}
div#contactInfo p 
{
    margin:0px 0px 8px 0px;
}
div#contactInfo input[type="text"]
{
    width:250px;
}

img.layout-icon
{
    width:65px;
    height:36px;
}

div#customizationZone
{
    position:relative;
    width: 350px;
    height: 198px;
    margin: 100px auto 0 auto; 
    background-image:url('/Content/bcard-shad.gif');
    background-position:right bottom;
}

div#customizationZone img
{
    top:0px;
    left:0px;
    position:absolute;
}

h5.side-name
{
    margin:0px;
    text-align:center;
}

img.side-icon
{
    border:solid 1px #ccc;
    width:62px;
    height:34px;
}

div.sides
{
    float:left;
    padding-right: 10px;
}


/*----- END OF ZONE-----*/

/********************* Config page **********************/

div.bcard-image-zone
{
    width: 228px;
    height: 131px;
    background-image:url('/Content/bcard-shad-small.gif');
    background-position:right bottom;
    margin:0px 10px;
}

img.bcard-img
{
    width:218px;
    height:121px;
    border:solid 1px #CCCCCC;
}

div.row
{
    clear:both;
  
    height:140px;
}

div.row > div
{
    float:left;
}

div.row h4
{
    font-size:1.2em;
}

table.config
{
    width:250px;
}

table.config,
table.config td
{
    border:0px;
}

table.config thead th
{
    background-color:#FFFFFF;
    border:none;
    border-bottom:solid 1px #CCCCCC;
}

h2.row-title
{
    font-size:1.15em;
    border-bottom:solid 1px #CCCCCC;
    font-weight:bold;
    padding:0px;
    margin:15px 0px 2px 0px;
}

div.type-box
{
    width:150px;
    
}

div.item-box
{
    width:580px;
}

div.desc-box
{
    width:250px;
}


a.toggle-link
{
    width:120px;
    height:25px;
    font-size:1.5em;
    color:#333333;
    text-decoration:none;
    display:block;
    text-align:center;
    border:solid 1px #FFFFFF;
    margin-top:20px;
}

a.toggle-link:hover
{
    background-color:#FFFFCC;
    border:solid 1px #666666;
}


a.toggle-link-selected
{
    background-color:#FFFFCC;
    border:solid 1px #666666;
}

a.select-item
{
    width:106px;
    height:114px;
    font-size:1em;
    color:#333333;
    text-decoration:none;
    display:block;
    text-align:center;
    border:solid 1px #FFF;
}

a.select-item:hover
{
    background-color: #F1F0D3;
    border: 1px solid #FF3300;
}


a.select-item-selected
{
    background-color:#EEEEFF;
    border:solid 1px #666666;
}


img.item-image
{
    width: 88px;
    height:88px;
    border:0px;
    padding-top:5px;
}



/* SIGN IN PAGES */

div#login-page-cont
{
    width:1004px;
    height:620px;
}

div#login-page-cont > div
{
    float:left;
    padding:10px;
}

div#login-part
{
    width:400px;
    height:450px;
}

div#register-part
{
    width:400px;
    height:600px;
    
}

div#register-panel
{
    border-left:solid 3px #CCC;
    width:380px;
    height:400px;
}




div#sign-in-panel
{
    width:355px;
    height:257px;
    background:url('/Content/login-back.png') no-repeat;
}
    
div#sign-in-panel > h4
{
    font-size:1.1em;
    font-weight:bold;
    display:table;
    margin:5px auto;
    text-align:center;
}
    
div#sign-in-panel fieldset
{
    width:300px;
    height:180px;
    border:0px;
    padding:0px;
    margin:30px auto 0px auto;
    
}

fieldset label
{
    display:inline-block;
    width:90px;
    font-size:1.1em;
}

div.editor-field
{
    width:296px;
    margin-bottom:4px;
}

.editor-field input[type="text"],
.editor-field input[type="password"]
{
    height:20px;
    line-height:20px;
    font-size:1.25em;
}

div.checkbox-field 
{
    padding-left:90px;
}

div.checkbox-field > label
{
    width:auto;
}

p#sign-in-button
{
    margin:30px 0px 0px 0px;
    text-align:right;
}

